<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>参赛作品免责声明 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }
      
      /* 声明内容样式 */
      .disclaimer-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }
      .section-title {
        @apply text-lg font-bold mb-3 flex items-center text-white;
      }
      .section-title i {
        @apply mr-2 text-secondary;
      }
      .disclaimer-item {
        @apply mb-3 text-sm text-gray-100;
      }
      .disclaimer-item strong {
        @apply text-white;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题栏 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
      <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
      <h1 class="text-xl font-bold">参赛作品免责声明</h1>
      <span class="w-6"></span> <!-- 占位，保持标题居中 -->
    </div>
    
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
      <!-- 声明引言 -->
      <div class="disclaimer-section">
        <p class="text-sm text-gray-100 mb-3">
          欢迎参与本次数智化赋能“微情境·微宣讲”红色实践活动（以下简称"活动"）。为明确参赛选手（以下简称"您"）与活动主办方之间的权利义务关系，保护双方合法权益，特制定本免责声明。请您仔细阅读并充分理解本声明全部内容，您提交参赛作品即视为已阅读、理解并同意本声明的全部条款。
        </p>
        <div class="bg-red-900/60 rounded p-3 text-xs text-gray-200">
          <i class="fa fa-exclamation-circle text-secondary mr-1"></i>
          重要提示：如您不同意本声明的任何条款，请立即停止参赛行为，不得提交任何参赛作品。
        </div>
      </div>
      
      <!-- 核心条款 -->
      <div class="disclaimer-section">
        <h2 class="section-title">
          <i class="fa fa-gavel"></i>核心条款
        </h2>
        
        <div class="disclaimer-item">
          <strong>一、适用范围</strong>
          <p class="mt-1">1.适用对象：所有参赛者及参赛作品<br>2.覆盖场景：活动全流程</p>
        </div>
        
        <div class="disclaimer-item">
          <strong>二、参赛者责任</strong>
          <p class="mt-1">1.作品内容（包括但不限于视频、文字、音频等）需要合法合规，违规后果自负；<br>
          2.原创 / 改编作品需合规标注，用他人素材超 5% 需书面授权；版权侵权纠纷，相关费用由参赛者承担，主办方追责有权追偿。<br>
          3.依据《中华人民共和国英雄烈士保护法》、《中华人民共和国刑法》等法律法规，若创作涉及英雄烈士的内容，需严格遵守法律规定，优先采用合法授权的资料、象征化手法等合规形式呈现；因内容违反上述法律规定或引发舆论、法律风险的，全部责任由您自行承担，本平台有权对违规内容采取下架、限制传播等措施。</p>
        </div>
        
        <div class="disclaimer-item">
          <strong>三、主办方免责</strong>
          <p class="mt-1">1.仅初筛作品，不保证内容真实，漏审无责；推荐展示不背书，侵权即下架（适用 “避风港原则”）。<br>
          2.权对上传内容进行合规性审核，若发现内容违反法律法规、公序良俗或本声明约定，有权直接删除内容、限制您的上传权限，无需提前通知。</p>
        </div>
        
        <div class="disclaimer-item">
          <strong>四、其他</strong>
          <p class="mt-1">1.提交作品即视为同意本声明，并自愿承担因内容本身（包括但不限于侵权、违法、违规等）引发的一切法律责任、民事赔偿、行政责任及其他不利后果，本平台不对此承担任何责任。<br>2.未尽事宜，参照相关法律法规。</p>
        </div>
                
        <div class="disclaimer-item">
          <strong>五、条款修改与解释</strong>
          <p class="mt-1">本声明最终解释权归河北石油职业技术大学马克思主义学院所有。</p>
        </div>
      </div>
      
      <!-- 联系方式 -->
      <div class="disclaimer-section">
        <h2 class="section-title">
          <i class="fa fa-question-circle"></i>咨询方式
        </h2>
        <div class="text-sm text-gray-100 space-y-2">
          <p>如您对本免责声明有任何疑问，请通过以下方式联系我们：</p>
          <p><i class="fa fa-envelope-o mr-2 text-secondary"></i>邮箱：2014998483@qq.com</p>
          <p><i class="fa fa-phone mr-2 text-secondary"></i>电话：15128937226</p>
        </div>
      </div>
      
      <!-- 确认按钮 -->
      <div class="pt-2 flex gap-3">
        <button id="cancelBtn" class="flex-1 bg-red-900 border border-red-700 py-3 rounded font-medium text-sm">
          不同意，返回
        </button>
        <button id="confirmBtn" class="flex-1 bg-secondary text-red-900 py-3 rounded font-medium text-sm">
          已阅读并同意
        </button>
      </div>
    </div>
    
    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 导航栏切换效果
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          //e.preventDefault();
          navItems.forEach(nav => nav.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 返回按钮事件
      document.querySelector('.fa-arrow-left').parentElement.addEventListener('click', function(e) {
        e.preventDefault();
        window.history.back();
      });
      
      // 取消按钮事件
      document.getElementById('cancelBtn').addEventListener('click', function() {
        window.history.back();
      });
      
      // 确认按钮事件
      document.getElementById('confirmBtn').addEventListener('click', function() {
        // 记录同意状态（实际项目中可存储在localStorage或传递给父页面）
        localStorage.setItem('disclaimerAgreed', 'true');
        // 返回上一页
        window.history.back();
      });
    });
  </script>
</body>
</html>